{layout name="layout" /}

<div class="layui-container">
    <div class="layui-fluid">
        <div class="layui-col-md6">
        </div>
        <div class="layui-col-md6">
            <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" name="keyword" placeholder="请输入关键字" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">规则状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="enabled" value="1" title="启用">
                        <input type="radio" name="enabled" value="0" title="禁用" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">消息类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="replyType" lay-verify="required">
                            <option value="text">文本消息</option>
                            <option value="image">图片消息</option>
                            <option value="news">图文消息</option>
                            <option value="voice">声音消息</option>
                        </select>
                    </div>
                </div>

                <div id="replyContent">
                    <div class="layui-form-item" type="text">
                        <label class="layui-form-label">规则内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" required lay-verify="required" placeholder="请输入回复内容" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item" hidden type="image">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="openImages">选择图片</button>
                            <input type="hidden" disabled id="image" name="image" value="" lay-verify="required"
                                autocomplete="off" class="layui-input">
                            <div class="layui-upload-list" style="width:100px;height:200px;">
                                <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" id="demo1" src="">
                                <p id="demoText"></p>
                            </div>
                        </div>
                        <!-- <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-image">上传</button> -->
                    </div>
                    <div hidden type="news">
                        <label class="layui-form-label">选择图文</label>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="openNews">选择图文消息</button>
                            <div class="layui-upload-list" style="width:100px;height:200px;">
                                <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" id="newsCover" src="">
                                <p id="newsTitle"></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item" hidden type="voice">
                        <label class="layui-form-label">声音</label>
                        <div class="layui-input-inline">
                            <input type="text" id="audio" name="audio" value="" lay-verify="required" placeholder="请上传音乐文件"
                                autocomplete="off" class="layui-input">
                        </div>
                        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-audio">上传</button>
                    </div>
                </div>

                <div class="layui-form-item layui-hide">
                    <input type="hidden" name="id" value="">
                    <input type="hidden" name="newsId" value="" id="newsId">
                    <input type="hidden" name="mediaImage" value="">
                    <input type="hidden" name="mediaAudio" value="">
                    <input type="hidden" name="imageAssetId" value="" id="imageId">
                    <input type="hidden" name="audioAssetId" value="" id="audioId">
                    <input type="button" lay-submit lay-filter="zbc-wechat-submit" id="zbc-wechat-submit" value="确认">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','layer', 'form','upload'], function () {
        var $ = layui.$
            , form = layui.form
            , layer=layui.layer
            , upload = layui.upload;

        
        $(document).on("click","#openNews",function(){
                parent.layer.open({
                title: '图文列表',
                type:2,
                area:['1024px', '600px'],
                content: '/admin/wechatArticle/list',
                btn:["确定","取消"],
                yes:function(index,layero){
                    var selected=layero.find("iframe").contents().find("[data-selected=true]")
                    var id=selected.attr("data-id");
                    var path=selected.attr("data-path");
                    var title=selected.attr("data-title");
                    $("#newsTitle").text(title);
                    $("#newsCover").attr("src",path);
                    $("#newsId").val(id);
                    parent.layer.close(index);
                }
            }); 
        })

        $(document).on("click","#openImages",function(){
                var parentLayer=parent.layer;
                var $this=$(this);
                parentLayer.open({
                title: '图片列表',
                type:2,
                area:['1024px', '600px'],
                content: '/admin/wechatArticle/images',
                btn:["确定","取消"],
                yes:function(index,layero){
                    var selected=layero.find("iframe").contents().find("[data-selected=true]")
                    var id=selected.attr("data-id");
                    var path=selected.attr("data-path");
                    $("#image").val(path);
                    $("#imageId").val(id);
                    $('#demo1').attr('src', path)
                    parentLayer.close(index);
                }
            }); 
        })

        form.on("select(replyType)",function(data){
            var reply=$("#replyContent [type="+data.value+"]");
            if(!reply) return;
            reply.show().siblings("div [type]").hide();
        })
        

        // upload.render({
        //    elem: '#layuiadmin-upload-image'
        //    , url: '/admin/upload/wechatFile?type=image'
        //    , accept: 'images'
        //    , method: 'post'
        //    , acceptMime: 'image/*'
        //    ,before: function(obj){
        //        //预读本地文件示例，不支持ie8
        //        obj.preview(function(index, file, result){
        //            $('#demo1').attr('src', result); //图片链接（base64）
        //        });
        //    }
        //    , done: function (res) {
        //         if(!res.data) return layer.msg('上传失败');

        //         $("#image").val(res.data.src);
        //         $("#imageId").val(res.data.id);
        //    }
        // });

        upload.render({
           elem: '#layuiadmin-upload-audio'
           , url: '/admin/upload/wechatFile?type=audio'
           , accept: 'audio'
           , method: 'post'
           , acceptMime: 'audio/mp3,audio/amr,/audio/wma,audio/wav'
           ,before: function(obj){
               //预读本地文件示例，不支持ie8
           }
           , done: function (res) {
               if(!res.data) return layer.msg('上传失败');

               $("#audio").val(res.data.src);
               $("#audioId").val(res.data.id);
           }
        });


        form.verify({
            required:function(value,item){
                if($(item).is(':hidden')){
                    return;
                }
                if(!value ||value=="" || value.length==0){
                    return "必填项不能为空";
                }
            }
        })
    });
</script>